<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>试驾预约</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="bootstrap/css/bootstrap-datetimepicker.min.css">
   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
   <style type="text/css">
   	#write{position:relative;left: 15%; width:70%;height:30%}
   	#but{position:relative;left: 16%; width:68%;height:30%}
   </style>
   <script type="text/javascript">
   	$(document).ready(function(){
		 
		 $('.form_datetime').datetimepicker({
			 language: 'zh-CN',
		     weekStart: 1,
		     todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				forceParse: 0,
		     showMeridian: 1
		 });
		});
 </script>
 </head>
 <body>
<div class="container">
 		<div class="panel panel-default" style="width:100%">
 		<span class="list-group-item clearfix">
 			<ul class="list-unstyled pull-left" style="width:40%">
 				<br>
 				<li>Car Name</li><br>
 				<li>指导价：&nbsp;&nbsp;</li><br>
 				<li>本店价：&nbsp;&nbsp;</li><br>
 			</ul>
 			<img class="img-responsive pull-right" src="img/car.jpg" alt="car" style="width:40%">
 		</span>
 	</div>
 		<div class="panel panel-default">
 			<a href="#" class="list-group-item">
				联系人
				</a>
 		</div>
 		<div class="panel panel-default">
 			<a href="#" class="list-group-item">
				手机号码
				</a>
 		</div>
 		<div class="panel panel-default">
 			<a href="#" class="list-group-item">
				销售顾问
				<div style="width:10%;float:right"><span class="glyphicon glyphicon-chevron-right"></span></div>
				</a>
 		</div>
 		<div class="panel panel-default">
				<input size="16" type="text" value="" placeholder="选择到店时间" readonly class="form-control form_datetime" style="padding: 6px 40px">

 		</div>
		<form class="form-horizontal" role="form">
			<div id="write" class="form-group">
			<textarea class="form-control" cols=40 rows=5 placeholder="输入您要提交的内容"></textarea>
		</div>
		<div id="but" class="form-group">
		<input id="button1" type="button"  data-toggle="modal" data-target="#myModal" value="预约" class="btn btn-primary btn-lg btn-block" />
		<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body" style="text-align:center;">
				<p>尊敬的车主，您好！</p>
				<p>已经成功接收到您的试驾预约，我们将用最优质的服务恭候您的光临！</p>
				</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default btn-block" data-dismiss="modal">确认
				</button>
			</div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
		</div>
	</form>
</div>
 </body>
</html>